Add Charts into Our React App with Nivo — Line Chart

The Victory lets us add charts and data visualization into our React app.

In this article, we’ll look at how to add charts into our React app with Nivo.

Line Chart

Nivo comes with code to let us add a line chart into our React app.

To install the required packages, we run:

npm i @nivo/line

Then we can add the chart by writing:

import React from "react";
import { ResponsiveLine } from "@nivo/line";

const data = [
  {
    id: "japan",
    color: "hsl(70, 70%, 50%)",
    data: [
      {
        x: "plane",
        y: 140
      },
      {
        x: "helicopter",
        y: 80
      },
      {
        x: "boat",
        y: 134
      },
      {
        x: "train",
        y: 202
      },
      {
        x: "subway",
        y: 143
      },
      {
        x: "bus",
        y: 266
      },
      {
        x: "car",
        y: 223
      },
      {
        x: "moto",
        y: 100
      }
    ]
  },
  {
    id: "france",
    color: "hsl(89, 70%, 50%)",
    data: [
      {
        x: "plane",
        y: 267
      },
      {
        x: "helicopter",
        y: 192
      },
      {
        x: "boat",
        y: 259
      },
      {
        x: "train",
        y: 40
      },
      {
        x: "subway",
        y: 34
      },
      {
        x: "bus",
        y: 1
      },
      {
        x: "car",
        y: 100
      },
      {
        x: "moto",
        y: 194
      }
    ]
  }
];

const MyResponsiveLine = ({ data }) => (
  <ResponsiveLine
    data={data}
    margin={{ top: 50, right: 110, bottom: 50, left: 60 }}
    xScale={{ type: "point" }}
    yScale={{
      type: "linear",
      min: "auto",
      max: "auto",
      stacked: true,
      reverse: false
    }}
    yFormat=" >-.2f"
    axisTop={null}
    axisRight={null}
    axisBottom={{
      orient: "bottom",
      tickSize: 5,
      tickPadding: 5,
      tickRotation: 0,
      legend: "transportation",
      legendOffset: 36,
      legendPosition: "middle"
    }}
    axisLeft={{
      orient: "left",
      tickSize: 5,
      tickPadding: 5,
      tickRotation: 0,
      legend: "count",
      legendOffset: -40,
      legendPosition: "middle"
    }}
    pointSize={10}
    pointColor={{ theme: "background" }}
    pointBorderWidth={2}
    pointBorderColor={{ from: "serieColor" }}
    pointLabelYOffset={-12}
    useMesh={true}
    legends={[
      {
        anchor: "bottom-right",
        direction: "column",
        justify: false,
        translateX: 100,
        translateY: 0,
        itemsSpacing: 0,
        itemDirection: "left-to-right",
        itemWidth: 80,
        itemHeight: 20,
        itemOpacity: 0.75,
        symbolSize: 12,
        symbolShape: "circle",
        symbolBorderColor: "rgba(0, 0, 0, .5)",
        effects: [
          {
            on: "hover",
            style: {
              itemBackground: "rgba(0, 0, 0, .03)",
              itemOpacity: 1
            }
          }
        ]
      }
    ]}
  />
);

export default function App() {
  return (
    <div style={{ width: 400, height: 300 }}>
      <MyResponsiveLine data={data} />
    </div>
  );
}

We have the data array that we render in our line chart.

It’s set as the value of the data prop.

margin have the margins for the chart.

xScale has the scale for the x-axis.

yScale has the scale for the y-axis.

yFormat has the format for the y-axis values.

axisBottom has the bottom axis.

legend has the axis bottom text.

legendPosition has the position of the legend.

tickSize , tickPadding , tickRotation has the tick spacing and rotation angles.

We have the same settings for axisLeft .

pointSize has the point size for the points.

pointColor have the point color.

pointBorderWidth and pointBorderColor have the point borders.

pointLabelYOffset has the offset of the point label.

useMesh set to true adds the grid to the background.

legends has legends settings. We translate the legend with the translateX and translateY properties.

itemSpacing , itemWidth , itemHeight , and itemOpacity set each item in the settings.

symbolSize and symbolShape has the settings for the symbol to the left of the legend text.

effects has the animation effect when we hover over the legend items.

Conclusion

We can add line charts into our React app with Nivo.